<template>
  <el-scrollbar style="height:100%;">
    <div class="bgk_container">
      <div class="goBack">
        <i class="iconfont icon-zhuye" @click="goBackHome()"></i>
      </div>
      <div class="title">文章管理</div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="文章标题" width="180" align="center">
        </el-table-column>
        <el-table-column prop="category" label="文章分类" width="120" align="center">
        </el-table-column>
        <el-table-column prop="content" label="文章内容" class="article_content" header-align="center">
        </el-table-column>
        <el-table-column prop="" label="选项" width="180" align="center">
          <template v-slot="scoped">
            <el-button type="primary" @click="dialogVisible = true;editCurrent(scoped.row._id)">编辑</el-button>
            <el-button type="danger" @click="deleteDialogVisible = true;articleIdChange(scoped.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑文章对话框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="80%">
        <el-form ref="currentArticle" :model="currentArticle" label-width="80px">
          <el-form-item label="文章标题">
            <el-input v-model="currentArticle.title"></el-input>
          </el-form-item>
          <el-form-item label="文章分类">
            <!-- <el-input v-model="currentArticle.category"></el-input> -->
            <el-select v-model="currentArticle.category" placeholder="请选择文章类别" class="cate_select">
              <el-option label="学习记录" value="学习记录"></el-option>
              <el-option label="生活琐事" value="生活琐事"></el-option>
              <el-option label="有感而发" value="有感而发"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="文章内容">
            <!-- <el-input v-model="currentArticle.content"></el-input> -->
            <mavon-editor v-model="currentArticle.content" @imgAdd="$imgAdd" ref=md />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false;changeArticle()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除文章对话框 -->
      <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%">
        <span>是否确定删除文章</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteDialogVisible = false;deleteArticle(currentArticleId)">确 定</el-button>
        </span>
      </el-dialog>
      <transition name="fade">
        <loading v-if="isLoading"></loading>
      </transition>
    </div>
  </el-scrollbar>
</template>

<script>
import Loading from '../loading/loading.vue'
export default {
  components: { Loading },
  data() {
    return {
      tableData: [],
      // 编辑文章对话框
      dialogVisible: false,
      currentArticle: {},
      // 删除文章对话框
      deleteDialogVisible: false,
      // 当前选择的文章id
      currentArticleId: 0,
      // Loading状态
      isLoading: true,
      // markdown编辑器
      // value: '',
      defaultData: 'preview'
    }
  },
  created() {
    this.getAllArticles()
  },
  mounted() {
    this.getAllArticles()
  },
  methods: {
    // 获取所有文章的数组
    getAllArticles() {
      this.$http.get('article', { params: { inputContent: '' } }).then(response => {
        this.tableData = response.data
        this.tableData.reverse()
        this.isLoading = false
      })
    },
    // 获取文章信息
    getArticleDetails(id) {
      this.$http.get(`article/${id}`).then(response => {
        this.currentArticle = response.data
      })
    },
    // 当前对话框的对应文章
    editCurrent(id) {
      this.getArticleDetails(id)
    },
    // 修改文章信息
    changeArticle() {
      this.$http.put(`articleChange/${this.currentArticle._id}`, {
        title: this.currentArticle.title,
        category: this.currentArticle.category,
        content: this.currentArticle.content
      }).then(response => {
        this.getAllArticles()
        this.$message({
          message: '修改成功！',
          type: 'success'
        })
      })
    },
    // 删除文章
    deleteArticle(id) {
      this.$http.delete(`articleDelete/${id}`).then(response => {
        if (response.status === 200) {
          this.getAllArticles()
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
        }
      })
    },
    // 存入当前文章id
    articleIdChange(id) {
      this.currentArticleId = id
    },
    // 返回主页
    goBackHome() {
      this.$router.push('/BsHome')
    },
    // mavon-editor 上传图片
    $imgAdd(pos, file) {
      var formdata = new FormData()
      formdata.append('file', file)
      this.$http.post('/upload', formdata).then((res) => {
        var img = res.data.url
        var imgUrl = img.split('\\')
        const url = 'http://localhost:3000/upload/' + imgUrl[imgUrl.length - 1]
        this.$refs.md.$img2Url(pos, url)
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
.bgk_container {
  min-height: 100%;
  padding: 50px 150px;
  box-sizing: border-box;
  background-image: linear-gradient(
    to right,
    rgba(94, 249, 254, 0.6),
    rgba(253, 255, 106, 0.6),
    rgba(255, 106, 106, 0.6)
  );
  .goBack {
    float: left;
    i {
      font-size: 30px;
      color: #1296db;
      cursor: pointer;
    }
  }
  .title {
    font-size: 26px;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
  }
  .el-table {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }
  .cate_select {
    width: 100%;
  }
}
</style>
